/* eslint-disable @typescript-eslint/no-var-requires */
import React, { useEffect, useState } from 'react';
import styles from './index.module.less';
import FooterNav from '@/components/footer-nav';
import { getMyTaskListApi } from '@/services/approval';
import classnames from 'classnames';
import { List, Toast } from 'antd-mobile-v2';
import { Link } from 'react-router-dom';
import { useDispatch } from 'react-redux';

const PersonalCenter: React.FC<any> = (props) => {
  const dispatch = useDispatch();
  const [total, setTotal] = useState(0); // 未审批数量
  const [tipsLoding, setTipsLoding] = useState(false); // 数量提示的loding+

  useEffect(() => {
    dispatch({ type: 'common/getUserInfoSaga' });
    getDocList();
  }, []);

  // 获取未审批数量
  const getDocList = async () => {
    const data = {
      lastId: '',
      pageSize: 10,
      operationType: 1, // 待审批 1 已审批 2
      pageNum: 1
    };
    setTipsLoding(true);
    try {
      const res = await getMyTaskListApi(data);
      if (res?.data.total) { setTotal(res.data.total); }
    } finally {
      setTipsLoding(false);
    }
  };

  return (
    <div className={styles['container']}>
      <div className={styles['main']}>
        <div className={styles['opt-list']}>
          <List>
            <Link to="/personal-info">
              <List.Item thumb={require('@/assets/images/icon-form-3.png')} arrow="horizontal">
                <span className={styles['list-item-text']}>个人中心</span>
                <i className={classnames('iconfont', 'iconnext', styles['icon'])}></i>
              </List.Item>
            </Link>
          </List>
        </div>
        <div className={styles['opt-list']}>
          <List>
            <Link to="/personal-center/my-create">
              <List.Item className="ignore-ratio-border-bottom-left-15" thumb={require('@/assets/images/icon-form-1.png')}>
                <span className={styles['list-item-text']}>我发起的</span>
                <i className={classnames('iconfont', 'iconnext', styles['icon'])}></i>
              </List.Item>
            </Link>
            <div className="grey-line" />
            <Link to="/personal-center/my-declare">
              <List.Item className={styles['tips-wrap']} thumb={require('@/assets/images/icon-form-2.png')}>
                <span className={styles['list-item-text']}>我审批的</span>
                <i className={classnames('iconfont', 'iconnext', styles['icon'])}></i>
                {tipsLoding ?
                  <div className={styles['empty-data']}><i className="iconfont iconjiazai" /></div> :
                  total > 0 && (<p className={styles['tips']}>{total}</p>)}
              </List.Item>
            </Link>
          </List>
        </div>
        {/* <div className={styles['opt-list']}>
          <List>
            <List.Item thumb={require('@/assets/images/icon-form-3.png')} arrow="horizontal">
              <span className={styles['list-item-text']}>设置</span>
            </List.Item>
          </List>
        </div> */}
        {/* <div className={styles['opt-list']}>
          <List>
            <Link to="/declare-doc/draft">
              <List.Item thumb={require('@/assets/images/icon-form-1.png')}>
                <span className={styles['list-item-text']}>草稿</span>
                <i className={classnames('iconfont', 'iconnext', styles['icon'])}></i>
              </List.Item>
            </Link>
          </List>
        </div> */}
        <div className={styles['opt-list']}>
          <List>
            <Link to="/enterprise/list">
              <List.Item thumb={require('@/assets/images/icon-form-1.png')}>
                <span className={styles['list-item-text']}>切换企业</span>
                <i className={classnames('iconfont', 'iconnext', styles['icon'])}></i>
              </List.Item>
            </Link>
          </List>
        </div>
      </div>
      <FooterNav {...props} />
    </div>
  );
};

export default PersonalCenter;